<template>
	<view class="wrap">
		<u-navbar title="请输入验证码" :title-bold="true" :background="background"></u-navbar>
		<view class="key-input">
			<view class="title">输入验证码</view>
			<view class="tips">验证码已发送至 +{{ phone }}</view>
			<u-code-input :focus="true" borderColor="#666666" :value="value" @change="change" @finish="finish"
				:maxlength="maxlength"></u-code-input>
			<text :class="{ error: error }">验证码错误，请重新输入</text>
			<view class="captcha">
				<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
				<text :class="{ regain: !show }">{{ second }}秒后重新获取验证码</text>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		codeLogin
	} from '@/service/loginService.js';
	import cookie from '@/util/store/cookie.js';

	export default {
		data() {
			return {
				background: {
					//backgroundColor: '#F5F5F5',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					backgroundImage: 'linear-gradient(100deg, rgb(135,206,250), rgb(255,240,245))'
				},
				maxlength: 6,
				value: '',
				second: 60,
				show: false,
				error: false,
				phone: '',
				requestId: '',
				url: ''
			};
		},
		computed: {},
		onLoad(par) {
			this.phone = par.mobile;
			this.requestId = par.requestId;
			// this.getCaptcha()
			let interval = setInterval(() => {
				if (this.second <= 0) {
					this.show = true;
					if (this.value.lenth != 4) {
						this.error = true;
					}
					clearInterval(interval);
				} else {
					this.second--;
				}
			}, 1000);
		},
		methods: {
			// 收不到验证码选择时的选择
			noCaptcha() {
				uni.showActionSheet({
					itemList: ['重新获取验证码', '接听语音验证码'],
					success: function(res) {},
					fail: function(res) {}
				});
			},
			// change事件侦听
			change(value) {},
			// 输入完验证码最后一位执行
			finish(value) {
				let code = cookie.get('invitation');
				if (code == '' || code == null) code = 0;
				codeLogin({
					phone: this.phone,
					code: value,
					requestId: this.requestId
				}).then(res => {
					if (res.code == 200) {
						uni.$u.vuex('isLogin', true);
						uni.$u.vuex('uid', res.result.id);
						uni.$u.vuex('username', res.result.username);
						uni.$u.vuex('userid', res.result.userid);
						uni.$u.vuex('avatar', res.result.avatar);
						uni.$u.vuex('sex', res.result.sex);
						uni.$u.vuex('token', res.result.token);
						uni.$u.vuex('phone', res.result.phone);
						uni.$u.vuex('home', res.result.house);
						uni.$u.vuex('userType', res.result.type);
						cookie.set('token', res.result.token);
						cookie.set('uid', res.result.id);
						
						this.$u.route({
							url: '/pages/index/index',
							type: 'redirectTo'
						});
					} else {
						this.error = true;
						this.value = '';
						this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							url: ''
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 80rpx;
	}

	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}
	}

	.title {
		font-size: 50rpx;
		color: #333;
	}

	.key-input .tips {
		font-size: 30rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {
		color: #666666;
		font-size: 30rpx;
		margin-top: 40rpx;

		.noCaptcha {
			display: block;
		}

		.regain {
			display: block;
		}
	}
</style>
